<template>
	<view>
		<view class="top">
			<image src="/static/images/icon_back.png" class="back"></image>
			<view class="status">待收货</view>
			<view class="top-line"></view>
			<view class="row-h-center" style="margin-top: 30rpx;">
				<view class="cart row-center">
					<image src="/static/images/cart.png" class="cart-img"></image>
				</view>
				<view class="saler-name">这是供应商名称</view>
			</view>
			<view class="row-between-center" style="margin-top: 24rpx;">
				<view class="top-key">合同号</view>
				<view class="top-value">11111111111111111111111111111111</view>
			</view>
			<view class="row-between-center">
				<view class="top-key">订单号</view>
				<view class="top-value">11111111111111111111111111111111</view>
			</view>
		</view>
		<view class="col " style="	background: #f2f3f8;">
			<view class="detail">
				<view class="detail-title">产品</view>
				<view class="goods-title row-between-center" style="margin-top: 24rpx;">
					<view class="goods-title-item">
						名称
					</view>
					<view class="goods-title-item row-center">
						数量
					</view>
					<view class="goods-title-item row-end">
						操作
					</view>
				</view>
				<view class="col" v-for="item,index in goods">
					<view class="row-w-center goods-item" style="width: 100%;margin-top: 10rpx;">
						<view class="col" style="width: 33%;">
							<view class="goods-name">鲁花花生油</view>
							<view class="goods-scale">10L<span class="goods-price">¥100.00</span></view>
						</view>
			
						<view class="col-center" style="width: 33%;">
							<view class="goods-num">200</view>
						</view>
			
						<view class="row-end" style="width: 33%;align-items: center;">
							<view class="goods-delete" @click="deleteGoods">删除</view>
						</view>
			
					</view>
					<view class="goods-line"></view>
				</view>
			</view>
			
			<view class="col count" >
				<view class="row-h-center">
					<view class="col count-item" style="width: 50%;">
						<view class="count-key">订单产品总数</view>
						<view class="count-value">60</view>
					</view>
					<view class="count-line1">
					</view>
					<view class="col count-item" style="width: 50%;">
						<view class="count-key">订单总金额</view>
						<view class="count-price">¥6000</view>
					</view>
				</view>
			</view>
			
			<view class="other col" >
				<view class="other-key">退货原因</view>
				<view class="other-value" style="margin-top: 20rpx;">这是退货原因</view>
			</view>
			
			<view class="other col">
				<view class="row-between-center ">
					<view class="other-key">是否含税</view>
					<view class="other-value" >含税</view>
				</view>
			
				<view class="row-between-center other-margin">
					<view class="other-key">约定交货日期</view>
					<view class="other-value" >2023-09-27</view>
				</view>
			
				<view class="row-between-center other-margin">
					<view class="other-key">交货方式</view>
					<view class="other-value" >自提</view>
				</view>
				
				<view class="row-between-center other-margin">
					<view class="other-key">自提地址</view>
					<view class="other-value" >青岛市黄岛区衡山路24号</view>
				</view>
				
				<view class="row-between-center other-margin">
					<view class="other-key">收货地址</view>
					<view class="other-value" >青岛市黄岛区衡山路24号</view>
				</view>
				
				<view class="row-between-center other-margin">
					<view class="other-key">托运单位</view>
					<view class="other-value" >青岛远洋</view>
				</view>
			
			</view>
			
			<view class="other col">
				<view class="row-between-center ">
					<view class="other-key">创建时间</view>
					<view class="other-value" >2023-09-27 12:24</view>
				</view>
			
				<view class="row-between-center other-margin">
					<view class="other-key">确认时间</view>
					<view class="other-value" >2023-09-27 12:24</view>
				</view>
			
				<view class="row-between-center other-margin">
					<view class="other-key">发货时间</view>
					<view class="other-value" >2023-09-27 12:24</view>
				</view>
				
				<view class="row-between-center other-margin">
					<view class="other-key">收货时间</view>
					<view class="other-value" >2023-09-27 12:24</view>
				</view>
				
				<view class="row-between-center other-margin">
					<view class="other-key">申请退货时间</view>
					<view class="other-value" >2023-09-27 12:24</view>
				</view>
			</view>
		</view>
	
		<view style="height: 150rpx;"></view>
		<view class="bottom row-center">
			<view class="bottom-agree">
				全部绝收
			</view>
			<view class="bottom-agree" @click="cofirm">
				确认收货
			</view>
			<view class="bottom-copy">
				复制创建新订单
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: [{}, {}, {}]
			}
		},
		methods: {
			cofirm(){
				uni.navigateTo({
					url:'/src/pages/buy/confirm_order'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F2F3F8;
	}
</style>
<style scoped lang="scss">
	
	.bottom{
		height: 116rpx;
		background-color: white;
		width: 100%;
		position: fixed;
		bottom: 0;
		.bottom-agree{
			padding: 16rpx 48rpx;
			margin-right: 20rpx;
			border-radius: 40rpx;
			background: #E6E6E6;
			color: #676C7F;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 183.333% */
		}
		.bottom-copy{
				padding: 16rpx 48rpx;
			border-radius: 40rpx;
			background: #3B60D3;
			color: #FFF;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 183.333% */
		}
	}
	
	.other{
		margin: 20rpx;
		padding: 40rpx 20rpx;
		border-radius: 12rpx;
		background: #FFF;
		.other-key{
			color: #A3AAB0;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
		.other-value{
			color:  #6A6876;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
		.other-margin{
			margin-top: 30rpx;
		}
	}
	.refund{
		border-radius: 12rpx;
		background: #FFF;
		
	}
	.count {
		width: calc(100% - 40rpx);
		margin: 20rpx;
		border-radius: 12rpx;
		background: white;

		.count-item {
			padding: 30rpx 40rpx;
		}

		.count-key {
			color: #6A6876;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}

		.count-value {
			color: #20252B;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 40rpx;
			/* 125% */
		}

		.count-price {
			color: #FF8934;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 40rpx;
			/* 125% */
		}

		.count-line1 {
			width: 1rpx;
			height: 66rpx;
			background: #E6E6E6;
		}

		.count-line2 {
			width: 100%;
			height: 1rpx;
			background: #E6E6E6;
		}
	}

	.goods-title {
		height: 68rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F7F8FC;

		.goods-title-item {
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}

		.goods-total {
			color: #17161B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx;
			/* 157.143% */
		}

		.goods-total-price {
			color: #F5222D;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx;
			/* 157.143% */
		}
	}

	.goods-item {
		.goods-name {
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
			/* 166.667% */
		}

		.goods-scale {
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}

		.goods-price {
			margin-left: 10rpx;
			color: #FF8934;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}

		.goods-num {
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}

		.goods-delete {
			color: #F5222D;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}

	}

	.goods-line {
		margin-top: 20rpx;
		height: 1rpx;
		background: #E6E6E6;
	}

	.detail {
		z-index: 99;
		margin-top: -10rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		background: white;

		.detail-title {
			color: #20252B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
			/* 157.143% */
		}

	}

	.back {
		width: 64rpx;
		height: 64rpx;
	}

	.top {
		padding: 24rpx;
		background: #3B60D3;

		.status {
			margin-top: 60rpx;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx;
			/* 150% */
		}

		.top-line {
			margin-top: 40rpx;
			border: 0.5rpx dashed #6d88e0;
		}

		.cart {
			background-color: white;
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			flex-shrink: 0;

			.cart-img {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.saler-name {
			margin-left: 10rpx;
			color: #FFF;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
			/* 166.667% */
		}

		.top-key {
			color: #6d88e0;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}

		.top-value {
			color: #FFF;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}

	}
</style>